<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>主页示例</title>
		<script type="text/javascript" src="js/xhr.js"></script>

		<script type="text/javascript">
			function init() {
				refresh();
			}

			function refresh() {

				};

		</script>
		<!--主页不需要更新数值-->
		
        <style>
            /*兼容浏览器*/
            *{
                padding: 0;
                margin: 0;
            }
            .head-title{
                width: 100%;
                height: 120px;
                background-color:#415380;
                position: relative;
            }
            .head-title > img{
                position: absolute;
                top:30px;
                left:30px;
                width: 60px;
                height: 60px;
            }
            .head-title > h2{
                position: absolute;
                left:120px;
                top:20px;
                color: #fff;
            }
            .head-title >h1{
                position: absolute;
                right:50px;
                top:20px;
                color: #fff;
            }
            .head-title>h4{
                position: absolute;
                left:120px;
                top:60px;
                color: #fff;
            }
            .seg{
                width: 100%;
                height: 5px;
                background-color:#F96B00;
            }
            .bottom{
                width: 100%;
                height: 100px;
                background-color:#415380;
                position: relative;
            }
            .bottom >h3{
                position:absolute;
                left:700px;
                top:30px;
                color: #ffffff;
            }
            .bottom>a{
                position: absolute; 
                left:950px; 
                top:30px;
                text-decoration:none;
                color: #fff;
            }
            .content{
                width: 100%;
                height: 605px;
            }
            .content-left{
                width: 15%;
                height: 605px;
                font-family: "Roboto", sans-serif;
                background-color: #BFBFBF;
                float: left;
                box-shadow: 0 4px 40px -8px rgba(0, 0, 0, 0.2);
            }
            .content-right{
                width: 85%;
                height: 605px;
                background-color: #ffffff;
                float: right;
            }
            .left-title{
                height: 45px;
                width: 100%;
                background-color: #415380;
            }
            .left-title > a{
                display: block;
                width: 100%;
                height: 45px;
                text-align: center;
                line-height: 40px;
                color: #ffffff;
                text-decoration: none;
            }
            .content-left >.tabs{
                width:100%;
                height:100%;
                background-color: #415380;
                color: #fff;
                text-transform: uppercase;
                text-align: center;
            }
            .content-left >.tabs >.tab{
                width: 100%;
                height: 60px;
                border: 1px solid #415380;
                background-color: #F96B00;
                cursor: pointer;
                font-weight: bold;
                line-height: 60px;
            }
            .content-left >.tabs >.tab:hover{
                color: #415380;
            }
        </style>
	</head>
    <body onload="init()">
        <div class="head-title">
            <img src="./img/icon.jpg" alt="zero"> 
            <h2 >华清远见教育集团</h2>
			<h1 >秉承做良心教育</h1>
			<h4 >济南研发中心</h4>
        </div>
        <div class="seg"></div>
        <div class="content">

            <div class="content-left" >
                <div class="left-title">
                    <a href="#">全屋智能控制系统</a>
                </div>
                <div class="tabs">
                    <div class="tab"><a href="temp_STM32.html">STM32设备</a><br></div>
                    <div class="tab"><a href="temp_modbus.html">ModBus设备</a><br></div>
                </div>
            </div>

            <div class="content-right">
                <div class="content active">
                    <h3>标题 1</h3>   
                </div>
            
                <div class="content">
                    <h3>标题 2</h3>   
                </div>
            
                <div class="content">
                    <h3>标题 3</h3>     
                </div>
            </div>
        </div>
        <div class="seg"></div>
        <div class="bottom">
            <h3>北京华清远见教育集团</h3>
            <a href="http://m.hqyj.com" >http://m.hqyj.com </a>
        </div>
	</body>
</html>
